//文本框
Vue.component('comp-image-phone',{
  props:['fld','value'],
  data:function(){
    return {
      fileList: this.value=='' ? [] : this.value,
      actionRemove : this.fld.actionRemove,
      qrcodeUrl:'',
      token:'',
      timestamp:0,
      timeImage:false,
      popoverQrcode:false,
      dialogVisible:false,
      dialogImageUrl:'',
      limit:(this.fld.limit || 1),
      action:"?controller=Index&action=GetImagesQrcode",
    }
  },
  template: `
    <el-row :gutter="0">
      <span class="el-upload-list el-upload-list--picture-card" v-for="(item,i) in fileList">
        <span class="el-upload-list__item is-success">
          <el-image
            style="width: 146px; height: 146px"
            :src="item.url"
            fit="cover"
            :preview-src-list="previewList">
          </el-image>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePreview(i,item)"><i class="el-icon-zoom-in"></i></span>
            <span class="el-upload-list__item-delete" @click="handleRemove(i,item)"><i class="el-icon-delete"></i></span>
          </span>
        </span>
      </span>
      <div tabindex="0" class="el-upload el-upload--picture-card">
        <el-popover
          placement="top-start"
          title="扫码拍照上传图片"
          width="146"
          :value="popoverQrcode"
          @show="upload"
          trigger="click">
          <el-image
            style="width: 146px; height: 146px"
            :src="qrcodeUrl"
            fit="fill"
            title="扫码拍照上传">
              <div slot="error" class="image-slot">
                扫码拍照上传
              </div>
            </el-image>
            <el-button type="primary" slot="reference">扫码拍照</el-button>
        </el-popover>
      </div>
      <el-dialog :visible.sync="dialogVisible" center>
        <div style="text-align:center;">
          <img style="max-width:100%;max-height:100%;" :src="dialogImageUrl" alt="" />
        </div>
      </el-dialog>
    </el-row>
  `,
  methods:{
    buildQRcode :function(){
      this.popoverQrcode = true;
      var that = this;
      var timestamp = new Date().getTime();

      if(!this.timestamp){
        this.timestamp = timestamp;
        var rand = Math.ceil(Math.random()*100000);
        this.token = this.timestamp+''+rand;
        // this.qrcodeUrl = `http://sev11.eqinfo.com.cn/login-verify-wechat/index.php?controller=Apply_Image&action=Qrcode&token=${this.token}&limit=${this.limit}&platfrom=${this.fld.platfrom}`;
        this.qrcodeUrl = `http://192.168.1.91/eqinfo/login-verify/index.php?controller=Apply_Image&action=Qrcode&token=${this.token}&limit=${this.limit}&platfrom=${this.fld.platfrom}`;
        // this.qrcodeUrl = `http://lwj.vaiwan.com/eqinfo/login-verify/index.php?controller=Apply_Image&action=Qrcode&token=${this.token}&limit=${this.limit}&platfrom=${this.fld.platfrom}`;
      }

      setTimeout(function(){
        that.getImageList();
      },2000);
    },
    upload : function(){
      if(this.fileList.length > 0){
        this.$confirm('确认重新上传吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.fileList = [];
          this.$emit('input',this.fileList);
          this.$emit('changeimg',this.fileList,this);
          //生成qrcode
          this.buildQRcode();
        }).catch(() => {
          return false;
        });
      }else{
        this.buildQRcode();
      }
    },
    getImageList : function(){
      if(this.timeImage){
        return false;
      }

      this.timeImage = true;
      var that = this;
      var params = {token:this.token,count:(this.fileList.length||0)};
      //去获取后台的图片，用于预览
      this.$http.post(this.action,params).then((res)=>{
        if(!res.data.success) {

          this.$notify.error({
            'title':'图片上传失败',
            'message':res.data.msg
          });
          this.timeImage = false;
          return false;
        }
        this.fileList = res.data.images || [];
        //自动消息二维码
        if(this.fileList.length > 0){
          this.popoverQrcode = false;
        }
        var fl = [];
        this.fileList.forEach((item,i)=>{
          var newData = item;
          newData['url'] = item.imgPath;
          Vue.set(this.fileList,i,newData);

          fl.push({name:item.name,url:item.imgPath,imageId:item.imageId||item.response.imageId});
        });

        this.$emit('input',fl);
        this.$emit('changeimg',this.fileList,this);

        //如果有图片并且上传结束
        if(this.fileList && res.data.quit){
          //文件上传成功后回调
          var key = `${this.fld.name}:success`;
          if(this.$root.callbacks[key]){
            this.$root.callbacks[key].apply(this,arguments);
          }
        }
        this.timeImage = false;
        if(!res.data.quit){
          setTimeout(function(){
            that.getImageList();
          },500);
        }
      }).catch(function (error) {
        this.timeImage = false;
        this.$notify.error({
          'title':'图片上传失败',
          'message':'请求失败,检查url或者其他设置'
        });
      });
    },
    handleRemove : function(i ,item){
      // console.log(i,'=>',item);
      //从服务器删除图片
      if(this.actionRemove) {
        var param = item;
        this.$http.post(this.actionRemove,param).then((res)=>{
          if(!res.data.success) {
            this.$notify.error({
              'title':'服务器删除图片失败',
              'message':'response.data.success not found'
            });
            return false;
          }
          this.fileList.splice(i ,1);
          console.log(this.fileList);
          this.$emit('input',this.fileList);
          this.$emit('changeimg',this.fileList,this);
          this.$notify.success({
            title:'图片删除成功',
            message:res.data.msg,
          });
          //删除回调
          var key = `${this.fld.name}:remove`;
          if(!this.$root.callbacks[key]){
            this.$root.callbacks[key].apply(this,arguments);
          }
        }).catch(function (error) {
          this.$notify.error({
            'title':'请求失败',
            'message':'请求失败,检查url或者其他设置'
          });
        });
      } else {
        //如果没有设置服务器删除代码,直接删除回调
        var key = `${this.fld.name}:remove`;
        if(!this.$root.callbacks[key]) return;
        this.$root.callbacks[key].apply(this,arguments);
      }
    },
    handlePreview : function(i,item){
      // var imgKey = 'item__'+i;
      // var img = this.$refs[imgKey].click();
      // console.log('images:',imgKey);
      this.dialogImageUrl = item.url;
      this.dialogVisible = true;
    },
  },
  computed: {
    previewList : function(){
      var _arr = [];
      this.fileList.forEach(function(item,index){
        _arr.push(item.url);
      });
      // console.log(this.fileList);
      return _arr;
    },
  },
  mounted:function(){
    // this.buildQRcode();
  }
});